<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>mydemo</title>
	<style>
		body,ul,li {margin:0;padding:0;}
		ul {list-style-type:none;}
		body {background:#000;text-align:center;font:12px/20px Arial;}
		#box {position:relative;width:492px;height:172px;text-align:center;margin:10px auto;background:#fff;}

		#box .content {position:relative;width:490px;height:170;}
		#box .content li {position:absolute;left:0;top:0;opacity:0;filter:alpha(opacity=0);}
		#box .content img {width:490px;height:170px;}
		#box .content li.current {opacity:1;filter:alpha(opacity=100);}

		#box .button {position:absolute;right:0;bottom:5px;overflow:hidden;zoom:1;color:#fff;}
		#box .button li {color:#fff;font-size:12px;float:left;width:20px;height:20px;cursor:pointer;margin-right:5px;background:#f90;opacity:0.7;filter:alpha(opacity=70);border-radius:20px;}

		#box .button li.current {opacity:1;filter:alpha(opacity=100);font-weight:700;background:#f60;}
	</style>

	<script>
		window.onload = function() {
			var oBox = document.getElementById("box");
			var oUl = document.getElementsByTagName("ul");
			var oContent = oUl[0].getElementsByTagName("li");
			var oButton = oUl[1].getElementsByTagName("li");
			var timer = play = null;
			var i = index= 0; 
			var bOrder = true;

			//按钮切换功能
			for(i=0;i<oButton.length;i++) {
				oButton[i].index = i;
				oButton[i].onmouseover = function() {
					show(this.index);
				}
			}

			//鼠标滑过停止动画
			oBox.onmouseover = function() {clearInterval(play)}
			//鼠标移出自动变化
			autoPlay();
			oBox.onmouseout = function() {autoPlay()}
			function autoPlay() {
				play = setInterval(function(){						
					//判断播放顺序
				bOrder ? index++ : index--;			
			
				//正序
				index >= oContent.length && (index = oContent.length - 2, bOrder = false);
			
				//倒序
				index <= 0 && (index = 0, bOrder = true);
			
				//调用函数
			show(index)						
				},2000)
			}
			//输入表滑过，淡入淡出效果
			function show(a) {
				index = a;
				var alpha = 0;
				for (var x in oButton) oButton[x].className = "";
				oButton[index].className = "current"
				clearInterval(timer);

				for(i=0;i<oContent.length;i++) {
					oContent[i].style.opacity = 0;
					oContent[i].style.filter = "alpha(opacity=0)";
				}

				timer = setInterval(function(){
					alpha += 2;
					alpha > 100 && (alpha = 100);
					oContent[index].style.opacity = alpha/100;
					oContent[index].style.filter = "alpha(opacity=alpha)";
					alpha == 100 && clearInterval(timer);
				},50)
			}
		}
	</script>
</head>
<body>
	<div id="box">
		<ul class="content">
			<li class="current"><img src="1.png" alt="111"></li>
			<li><img src="2.png" alt="222"></li>
			<li><img src="1.png" alt="333"></li>
			<li><img src="2.png" alt="444"></li>
			<li><img src="1.png" alt="555"></li>
			<li><img src="2.png" alt="666"></li>
		</ul>
		<ul class="button">
			<li class="current">1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
		</ul>
	</div>
</body>
</html>